{extend name="layout/layout"}
{block name="content"}
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" >
                    {include file="user_activity/page_menu" menu='par_notice' id="$id" /}
                </div>
                <div class="right_main ">
                    <p class="ft24 mb10 ft-bold">活動通知</p>
                    <p class="ft14 gary_c9 mb20 ft-bold">活動通知發送給報名人，並非發送給所有參加人（報名人可能幫其他參加人報名）</p>
                    <div class="block_com" style="min-height: 70vh;">
                       <form class="layui-form layui-row layui-col-space40" onsubmit="return false;">
                          <div class="layui-col-md6 layui-col-xs12">
                             <div class="layui-form-item">
                                <div class="label must">信件地址</div>
                                <div class="">
                                   <input type="text" name="email" lay-verify="required|email" placeholder="回复的Email"
                                      autocomplete="off" class="layui-input">
                                </div>
  
                             </div>
                             <div class="layui-form-item">
                                <div class="label must">信件主題</div>
                                <div class="">
                                   <input type="text" name="title" lay-verify="required" placeholder="信件标题"
                                      autocomplete="off" class="layui-input">
                                </div>
  
                             </div>
                             <div class="layui-form-item">
                                 <div class="label must">信件內容</div>
  
                                <textarea class="layui-textarea" name="content" style="height: 3rem;"></textarea>
                             </div>
                          </div>
                          <div class="layui-col-md6 layui-col-xs12">
                             <div class="label ">發送對象
                                <p class="tip1">我們只向符合條件的報名人 ACCUPASS 帳號發送活動通知，並不會通知報名表中 填寫的參加人。</p>
                             </div>
                             <div class="layui-form-item">
                                <div class="label must"><span class="ft12">发送对象</span></div>
                                <div class="">
                                   <select  name="send_type" lay-filter="send_type">
                                      <option value="0">全部</option>
                                      <option value="1">已报名待审核者</option>
                                      <option value="2">已报名成功者</option>
                                      <option value="3">报名失败者</option>
                                   </select>
                                </div>
                             </div>
                             <div class="layui-form-item">
                                <div class="label must"><span class="ft12">发送人数</span></div>
                                <div class="tac orange_c mt10 ">
                                   <span class="ft30 line1 count_list">6</span>人
                                </div>
                             </div>
                             <div class="layui-form-item">
                                <input type="checkbox" lay-filter="reserve" name="reserve" value="1" title="排程發送">
                                <p class="ft12 gary_c9">根據你的預定時間，我們將向符合條件的人發送通知，但由於報名情況的變動，最 終通知的接收人數可能增加或減少</p>
                             </div>
                             <div class="layui-form-item">
                                <div class="label"><span class="ft12">排程日期</span></div>
                                <div class="">
                                   <input type="text" name="send_date" class="layui-input" id="ID-laydate-shortcut-date">
  
                                </div>
                             </div>
                             <div class="layui-form-item">
                                <div class="label"><span class="ft12">*排程时间</span></div>
                                <div class="">
                                   <input type="text" class="layui-input" name="send_time" id="ID-laydate-shortcut-range-time"
                                      placeholder=" - ">
                                </div>
                             </div>
                          </div>
                          <div class="d-flex w100">
                             <div class="mr20 flex-1">
                                <!-- <button
                                   class="w100 layui-btn layui-btn-lg  layui-btn-primary layui-border-orange layui-btn-radius">储存</button> -->
                             </div>
                             <div class="flex-1">
                                <button class="w100 layui-btn layui-btn-lg layui-bg-orange layui-btn-radius" lay-submit lay-filter="send_notice">发送信件</button>
                             </div>
                          </div>
                       </form>
                    </div>
                 </div>
            </div>
        </div>
    </section>
</main>
<script>

    layui.use(['form', 'laydate', 'util'], function () {
       var form = layui.form;
       var layer = layui.layer;
       var laydate = layui.laydate;
       var util = layui.util;
       form.on('select(send_type)',function(data){
         const send_type = data.value;
         $.get('/activity/user/activity/{$act.id}/user_active_par_notice_add?send_type='+send_type, function(res) {
            // 当请求成功时，这里的回调函数会被执行
            if(res.code = 1){
               $('.count_list').text(res.data.count_list)
            }

         })
         .fail(function() {
            // 如果请求失败，这里的回调函数会被执行
            console.error("请求失败。");
         });
      })

      form.on('submit(send_notice)', function(data){
         var field = data.field; // 获取表单字段值
         $.quickPost('/activity/user/activity/{$act.id}/user_active_par_notice_add', data.field).done((res) => {
                  // 审核通过后的操作，例如刷新页面
               location.reload();
         });
         return false; // 阻止默认 form 跳转
      });
  
       // 日期
       laydate.render({
          elem: "#ID-laydate-shortcut-date",
          shortcuts: [
             {
                text: "昨天",
                value: function () {
                   var now = new Date();
                   now.setDate(now.getDate() - 1);
                   return now;
                }
             },
             {
                text: "今天",
                value: function () {
                   return Date.now();
                }
             },
             {
                text: "明天",
                value: function () {
                   var now = new Date();
                   now.setDate(now.getDate() + 1);
                   return now;
                }
             },
             {
                text: "上个月",
                value: function () {
                   var now = new Date();
                   var month = now.getMonth() - 1;
                   now.setMonth(month);
                   // 若上个月数不匹配，则表示天数溢出
                   if (now.getMonth() !== month) {
                      now.setDate(0); // 重置天数
                   }
                   return [now];
                }
             },
             {
                text: "下个月",
                value: function () {
                   var now = new Date();
                   var month = now.getMonth() + 1;
                   now.setMonth(month);
                   // 若下个月数不匹配，则表示天数溢出
                   if (now.getMonth() !== month) {
                      now.setDate(0); // 重置天数
                   }
                   return [now];
                }
             },
             {
                text: "某一天",
                value: "2016-10-14"
             }
          ]
       }); laydate.render({
          elem: "#ID-laydate-shortcut-range-time",
          type: "time",
          range: true,
          shortcuts: [
             {
                text: '09:30 <p style="text-align: center;">到</p> 11:30',
                value: (function () {
                   var date1 = new Date();
                   date1.setHours(9, 0, 0, 0);
                   var date2 = new Date();
                   date2.setHours(11, 30, 0, 0);
                   return [date1, date2];
                })
             },
             {
                text: '13:00 <p style="text-align: center;">到</p> 15:00',
                value: (function () {
                   var date1 = new Date();
                   date1.setHours(13, 0, 0, 0);
                   var date2 = new Date();
                   date2.setHours(15, 0, 0, 0);
                   return [date1, date2];
                })
             }
          ]
       });
    })
 
 </script>

{/block}